<!-- 写评论 -->
<!-- 小瓜子 更新于2020/08/19 -->
<!-- 完成组件的基本功能 -->

<!-- 小瓜子 更新于2020/08/21 -->
<!-- 1. 解决在未点击选择回复对象时选择了私密，再选择对象时不改变placeHolder文字的bug 
	 2. 解决选择私密后取消选择私密placeHolder文字不变的bug-->

<!-- 小瓜子 更新于2020/08/24 -->
<!-- 1. 输入框文本过长时不换行的bug -->

<!-- 小瓜子 更新于2020/08/26 -->
<!-- 完成评论请求接口对接 -->

<!-- 小瓜子 更新于2020/08/29 -->
<!-- 更新组件传值 -->

<!-- 小瓜子 更新于2020/08/31 -->
<!-- 当点击某条评论时自动聚焦，失去焦点时清空被回复人，默认回复帖子 -->

<!-- 小瓜子 更新于 2020/09/02 -->
<!-- 重写组件逻辑 -->

<!-- 小瓜子 更新于 2020/09/08 -->
<!-- 1.修复点击私密评论时因为失去焦点而清除被回复人的bug -->
<template>
	<!-- <view class="comment_edit" :class="keyboardActive ? 'keyboard_active' : ''"> -->
	<view class="comment_edit">
		<!-- <input type="text" value="" placeholder="说点什么" :disabled="commentId==0 ? 'true' : 'false'"/> -->
		<scroll-view scroll-y="true" scroll-x="false" class="input_content">
			<textarea v-model="formData.commentContent" :placeholder="placeText" auto-height="true" @blur="loseFocus" :focus="focus"></textarea>
		</scroll-view>
		<view class="buttons">
			<!-- 预留添加图片按钮，添加此按钮后需要调整input输入框的宽度为70% -->
			<!-- <text class="inxupt inxupttubiao36" @tap="addImages"></text> -->
			
			<!-- 默认不是私密评论 -->
			<text :class="formData.secrete ? 'inxupt inxupttubiao25' : 'inxupt inxupttubiao24'" @tap.stop="secrete"></text>
			<text class="inxupt inxupttubiao26" @tap="submmit"></text>
		</view>
	</view>
</template>

<script>
	import { _ajax } from '../../in-xupt-functions.js'
	
	export default {
		props:{
			postId: {
				type: Number,
				default: undefined
			},
			replyUserId: {
				type: Number,
				default: undefined
			}
		},
		data() {
			return {
				placeText: "说点什么",
				formData: {
					parentId: 0,
					commentContent: "",
					secrete: false,
					authorNickName: "",
					replyUserId: undefined,
					rootId: 0
				},
				focus: false ,// 用来决定是否获得焦点
				receivePrivately: false ,
				secreteChange: false,
				keyboardActive: false
			};
		},
		methods: {
			// 预留添加图片的函数
			// addImages: function() {
				
			// },
			secrete: function() {
				this.secreteChange = true;
				if (!this.receivePrivately) {
					// 08.21 bug2
					if (this.formData.secrete) {
						if(this.formData.authorNickName) {
							this.placeText = "回复 " + this.formData.authorNickName + "："
						}else {
							this.placeText = '说点什么';
						}
					}else {
						if(this.formData.authorNickName) {
							this.placeText = "回复 " + this.formData.authorNickName + "(私密)："
						}else {
							this.placeText = '说点什么(私密)';
						}
					}
					this.formData.secrete = !this.formData.secrete;
				}
				setTimeout(() => {
					this.secreteChange = false;
				},300)
			},
			submmit: function() {
				// 当输入为空时，弹窗提醒用户输入内容
				if(this.formData.commentContent == ""){
					uni.showToast({
						icon: "none",
						title: "请输入评论内容哦~"
					})
				} else {
					let url = '/post/'+ this.$props.postId +'/comment'
					uni.showLoading({
						mask:true,
						title: '正在上传......'
					})
					let submitData = {
						'body': this.formData.commentContent,
						'parentId': this.formData.parentId,
						'privately': this.formData.secrete,
						'replyUserId': !this.formData.replyUserId ? this.$props.replyUserId : this.formData.replyUserId,
						'rootId': this.formData.rootId
					}
					this.formData = {
						parentId: 0,
						commentContent: "",
						secrete: false,
						authorNickName: "",
						rootId: 0
					};
					this.placeText = "说点什么";
					console.log(submitData)
					_ajax({
						url: url,
						method: 'POST',
						data: submitData
					}).then(res => {
						console.log(res)
						if(res.data.status != 0) {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							})
						} else {
							// 有rootId则说明是评论的回复，将其插入到评论的回复中
							uni.showToast({
								icon: 'none',
								title: '评论成功！'
							})
							this.$emit('insertComment',res.data.data)
						}
					})
				}
			},
			loseFocus() {
				setTimeout(() => {
					// 判断是否点击了私密评论按钮
					if (!this.secreteChange) {
						// 如果不是点击了私密评论按钮，则清空被回复人
						this.focus = false;
						if(this.formData.commentContent == '') {
							this.formData = {
								parentId: 0,
								commentContent: "",
								secrete: false,
								authorNickName: ""
							};
							this.placeText = '说点什么'
						}
					}else {
						console.log('点击了私密评论按钮')
						// 如果点击的是私密评论按钮，则不清空，并重新获得焦点
						this.focus = false;
						console.log(this.focus)
					}
				}, 100)
				
			}
		},
		created() {
			this.userId = uni.getStorageSync('userId')
			// 监听全局时间setCommentId，这个函数定义在页面CommentBox.vue下的solveReceive方法下
			// data有两个属性：nick_name 和 id
			// 其中nick_name是被回复人的昵称
			// id是被回复的信息的id
			uni.$on("setCommentId", data => {
				console.log(data)
				// 是直接点击帖子详情中的评论按钮的
				if (!data.fromPostings) {
					this.formData.secrete = false; // 08.21 bug1
					this.formData.parentId = data.parentId;
					this.formData.authorNickName = data.nick_name;
					this.formData.replyUserId = data.replyUserId;
					this.formData.rootId = data.rootId;
					this.formData.secrete = data.privately
					if (data.privately) {
						this.placeText = "回复 " + data.nick_name + "(私密):" ;
						this.receivePrivately = true
					}else {
						this.placeText = "回复 " + data.nick_name + " :" ;
						this.receivePrivately = false
					}
				}
				this.focus = true;
			})
			uni.onKeyboardHeightChange((res) => {
				if(res.height == 0) {
					this.keyboardActive = false
				}else {
					this.keyboardActive = true
				}
			})
		}
	}
</script>

<style lang="less">
	image {
		width: 500rpx;
		height: 500rpx;
		margin: 0 95rpx;
	}
	.keyboard_active {
		margin-bottom: 10px;
	}
	.comment_edit {
		position: fixed;
		bottom: 0px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		min-height: 60rpx;
		width: 100%;
		line-height: 60rpx;
		background-color: #FFFFFF;
		box-shadow: 0rpx 0rpx 10rpx rgba(0,0,0,.1);
		box-sizing: border-box;
		// 输入框样式
		.input_content {
			padding-left: 20rpx;
			padding-right: 10rpx;
			margin-top: 2rpx;
			width: 80%;
			max-height: 256rpx;
			line-height: 48rpx;
			border-radius: 24rpx;
			border: 2rpx solid #d7d7d7;
			color: @g-gray;
			textarea {
				padding: 10rpx;
				font-size: 24rpx;
				width: 100%;
			}
		}
		.buttons {
			text {
				margin-left: 30rpx;
			}
		}
		
	}
	
</style>
